@import 'norm.scss';
@mixin afont($color:'grey',$size:14px,$height:40px) {
    color: $color;
    font-size: $size;
    line-height: $height;
    &:hover{
        color:red;
    }
}
@mixin mainset($mainnum) {
    width: 1400px;
    margin: 0 auto;
    height:$mainnum * 1px;
} 
@mixin menu {
    // background: #fff;
    width: 80px;
    position: relative;
    ul{ background:#fff;
        position: absolute;
        z-index: 100;
        top:40px;
        left: -6px;
        li{
            width: 92px;
        }
        display: none;
    }
    &>span{
        padding: 0;
        &:nth-of-type(1){
            display: inline;
        }
        &:nth-of-type(2){
            display: none;
        }
    }
    &:hover{
        background: #fff;
        ul{
            display: block;
        }
        &>span{
            &:nth-of-type(2){
                display: inline;
            }
            &:nth-of-type(1){
                display: none;
            }
        }
    } 
}
@mixin menuafont {
    font-size: 16px;
    color: #333;
    line-height: 36px;
    &:hover{
        color:red;
    }
}
@mixin bgposition($num) {
    display: block;
    width: 80px;
    @include afont(grey,"12px",1 );
    div{
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url('https://res.vmallres.com/pimages//squaredInfo/icon/5/443d2d8cf51bde49706f563c41e163fa.png') no-repeat;
        background-position-x:$num *-40px;
        background-size: auto 40px;
    }
    span{
        font-size:12px;
    }
}
@mixin bgpositionjr($numjr:1) {
    display: flex;
    align-items: center;
    div{
        width: 20px;
        height: 20px;
        background: url('https://res.vmallres.com/pimages//squaredInfo/icon/5/443d2d8cf51bde49706f563c41e163fa.png') no-repeat;
        // background-position-y:-13px;
        background-position-x:$numjr *-20px - 220px;
        background-size: auto 40px;
    }
    &:hover{
        color:red;
    }
}
#myModal{
    *{
         box-sizing: border-box;
    }
   
}
#banner{
    width: 100%;
    height: 550px;
    .swiper-container {
        width: 100%;
        height: 550px;
        border-radius: 0 0 20% 20%;
    }
    position: relative; 
    &>ul{
        position: absolute;
        z-index:80;
        left:100px;
        top:20px;
        background:#fff;
        width: 200px;
        border-radius: 10px;
        &>li{
            h3{
                height: 4px;
                width: 50px;
                margin: 0 auto;
            }
            div{
                width: 150px;
                height: 48px;
                padding:12px 0 12px;
                margin-left: 25px;
                border-bottom: 1px solid #ddd;
                // &:last-child{
                //     border:none;
                // }
                a{
                    font-size: 14px;
                    padding-right: 4px;
                    padding-bottom: 2px;
                    color:#a6a6a6;
                    &:first-child{
                        font-size: 16px;
                        color:#848484;
                        display: block;
                    }
                }
                
            }
            
            &>ul{
                overflow: hidden;
                position: absolute;
                top:0;
                left: 200px;
                background:#fff;
                border-radius: 0 10px 10px 0;
                li{
                    overflow: hidden;
                   a{
                        display: block;
                        width: 204px;
                        height:80px;
                        margin: 15px;
                        border-radius: 8px;
                        img{
                            display: inline-block;
                            width:56px;
                            height: 56px;
                            margin:12px 8px 0 6px;
                            padding: 0;
                            vertical-align: middle
                        }
                        span{
                            vertical-align: middle;
                            font-size:14px;
                            color:#848484;
                        }
                        &:hover{
                            background:#eee;
                        }
                    } 
                }
                
                display: none;
            }
            &:hover{
                background: #fff;
                div{
                    border: none;
                    a{
                        color:#333;
                        &:hover{
                            color: red;
                        }
                    }
                }
                ul{
                    display: block;
                }
            }
            &:first-child{
                border-radius: 10px 0 0 0;
            }
            &:last-child{
                border-radius: 0 0 0 10px;
                div{
                    border: none;
                }
                &:hover{
                    margin-top:-1px;
                }
            }
        }
        &:hover{
            background: #dfdfdf;
            border-radius: 10px 0 0 10px;
        }
    }
    .middle_menu{
        display: flex;
        padding: 18px 26px 0;
        position: absolute;
        bottom: -30px;
        left: 100px;
        width: 1278px;
        height: 70px;
        z-index: 100;
        background: #fff;
        border-radius: 10px;
        .menu_left{
            //float: left;
            border-right:1px solid #eee;
            text-align: center;
            width:244px;
            height: 52px;
            color: #848484;
            img{
                width: 52px;
                height: 52px;
                float: left;
                margin-right: 10px;
            }
            .login_stuff{
                float: left;
                
                .login{
                    font-size: 14px;
                    a{
                        &:hover{
                            color:red;
                        }
                    }
                }
                &>a{
                    margin-top:10px;
                    display: block;
                    float: left;
                    font-size:13px;
                    width:66px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 6px;
                    &:first-of-type{
                        border:1px solid #e47b7f;
                        margin-right: 8px;
                        &:hover{
                            background:#de5b60;
                            color:#fff;
                        }
                    }
                    &:last-child{
                        background:#595454;
                        &:hover{
                            background: #333;
                            color:#fde4b3;
                        }
                    }
                }
            }
        }
        .menu_center{
            border-right: 1px solid #eee;
            text-align: center;
            display: flex;
            flex-grow: 1;
            width: 660px;
            height: 64px;
            justify-content: space-around;
            @for $i from 1 to 7 {
                a{
                    $bb:$i - 1;
                    &:nth-child(#{$i}){
                        // background: red;
                        @include bgposition($bb) 
                    }
                }
            };
        }
        .menu_right{
            width:266px;
            .m_righttop{
                text-align: center;
                span{
                    font-weight: 900;
                    color: #555;
                }
                .swiper-container2{
                    margin-top:-18px;
                    float: right;
                    width: 190px;
                    height: 43px;
                    overflow: hidden;
                    img{
                        width: 190px;
                        height: 43px;
                    }
                }
            }
            .m_rightbottom{
                width: 266px;
                font-size: 12px;
                line-height: 45px;
                display: flex;
                justify-content: space-around;
                a{
                    
                    @for $i from 1 to 4 {
                        &:nth-child(#{$i}){
                            @include bgpositionjr($i);
                        }
                    }
                }
            }
        }
    }
}
#adv{
    @include mainset(200);
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    a{
        overflow: hidden;
        display: block;
        width: 290px;
        height: 200px;
        border-radius: 10px;
        img{
            width: 290px;
            height: 200px;
        }
        &:hover{
            box-shadow:10px 0 10px #ddd,-10px 0 10px #ddd
        }
    }
}
#goods_list{
    padding-top: 20px;
    text-align: center;
    h6{
        font-size: 24px;
        font-weight: 900;
    }
    //border: 5px solid red;
    background:#efefef;
    margin-bottom: 50px;
    .thelist{
        margin:0 auto;
        display: flex;
        width: 1200px;
        min-height: 1000px;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: hidden;
        li{
            text-align: center;
            background:rgb(180, 176, 176);
            width: 280px;
            border: 1px solid #eee;
            margin-bottom: 40px;
            margin-top:40px;
            &:hover{
                box-shadow: 10px 0 10px #ddd,-10px 0 10px #ddd
            }
            img{
                width: 100%;
            }
            b{
                color:red;
                font-weight: 900;
                font-size: 20px;
            }
            a{
                padding: 0 40px;
                display: block;
                font-size:14px;
                line-height: 20px;
                color:#333;
                &:hover{
                    color: red;
                }
            }
        }
    }
}

#exp{
    @include mainset(400);
    background: #a6a6a6;
    margin-top: 40px;
}
// #footer-container{background:#f9f9f9;width:100%;min-width:1400px;overflow: hidden;}
// #footer-container .footer{display: block;padding:22px 100px 22px;width:1400px;margin:0 auto;color:#666;line-height:1.5}
// #footer-container .footer .fl{float: left;}
// #footer-container .footer a{color:#666;font-size:12px;}
// #footer-container .footer a:hover{color:#ca151d;text-decoration:none}
// #footer-container .footer-warrant-area{text-align:left;color:#a4a4a4;line-height:20px}
// #footer-container .footer-warrant-area .footer-warrant-logo{width:82px;height:20px;padding:8px 20px 0 0}
// #footer-container .footer-warrant-area .footer-warrant-logo a{display:block;width:100%;height:100%}
// #footer-container .footer-warrant-area .footer-warrant-logo img{vertical-align:top;width:82px;height:20px}
// #footer-container .footer-warrant-area a{color:#a4a4a4}
// #footer-container .footer-warrant-area em{padding-right:3px;margin-left:3px}
// #footer-container .footer-warrant-area .footer-warrant-img{margin-top:2px}
// #footer-container .footer-warrant-area .footer-warrant-img a{display:block;width:70px;margin-left:17px;height:24px}
// #footer-container .footer-warrant-area .footer-warrant-img img{vertical-align:top;width:70px;height:24px}
// #footer-container .footer-warrant-link{*zoom:1;margin-top:3px;margin-bottom:4px}
// #footer-container .footer-warrant-link:before,.footer-warrant-link:after{content:"";display:table}
// #footer-container .footer-warrant-link:after{clear:both}
// #footer-container .footer-warrant-link li{float:left;line-height:1;padding-right:6px;border-right:1px solid #d3d3d3;margin-right:6px}
// #footer-container .footer-warrant-link li a{color:#777}
// #footer-container .footer-warrant-link li:last-child{border:0;margin-right:0;padding-right:0}